<template>
	<view>
		<view class="abutment-list">
			<view class="abutment-type" @click="getContactInfo('mobile')">
				<image src="@/static/images/phone.png" mode="widthFix" v-if="userContactList.mobile_status==0"></image>
				<image src="@/static/images/phone_hui.png" mode="widthFix" v-else></image>
				<view class="title">
					手机号
				</view>
			</view>
			<view class="abutment-type" @click="getContactInfo('wechat')">
				<image src="@/static/images/wx.png" mode="widthFix" v-if="userContactList.wechat_status==0"></image>
				<image src="@/static/images/wx_hui.png" mode="widthFix" v-else></image>
				<view class="title">
					微信
				</view>
			</view>
			<view class="abutment-type" @click="getContactInfo('qq')">
				<image src="@/static/images/QQ.png" mode="widthFix" v-if="userContactList.qq_status==0">
				</image>
				<image src="@/static/images/QQ-hui.png" mode="widthFix" v-else></image>
				<view class="title">
					QQ
				</view>
			</view>
			<view class="abutment-type" @click="getContactInfo('email')">
				<image src="@/static/images/email.png" mode="widthFix" v-if="userContactList.email_status==0"></image>
				<image src="@/static/images/email_hui.png" mode="widthFix" v-else></image>
				<view class="title">
					邮箱
				</view>
			</view>
			<view class="abutment-type" @click="getContactInfo('tiktok')">
				<image src="@/static/images/douyin.png" mode="widthFix" v-if="userContactList.tiktok_status==0"></image>
				<image src="@/static/images/douyin-hui.png" mode="widthFix" v-else></image>
				<view class="title">
					抖音
				</view>
			</view>
			<view class="abutment-type" @click="getContactInfo('red_book')">
				<image src="@/static/images/redbook.png" mode="widthFix" v-if="userContactList.red_book_status==0">
				</image>
				<image src="@/static/images/redbook_hui.png" mode="widthFix" v-else></image>
				<view class="title">
					小红书
				</view>
			</view>
		</view>
		<view class="pay-tips" @click="openTips">
			<text>此用户提供以上站外对接方式</text>
			<image src="@/static/images/shuoming.png" mode="aspectFill" style="width: 28rpx;height: 28rpx;padding-left: 10rpx;"></image>
		</view>
		<!-- 获取手机号 -->
		<uv-popup :round="20" ref="getPhoneRef" mode="bottom" closeable>
			<view class="register-popup">
				<view class="register-title">
					<view class="title" v-if="titleName=='mobile'">
						获取手机号
					</view>
					<view class="title" v-if="titleName=='wechat'">
						获取微信号
					</view>
					<view class="title" v-if="titleName=='qq'">
						获取QQ号
					</view>
					<view class="title" v-if="titleName=='email'">
						获取邮箱号
					</view>
					<view class="title" v-if="titleName=='tiktok'">
						获取抖音号
					</view>
					<view class="title" v-if="titleName=='red_book'">
						获取小红书号
					</view>
				</view>
				<view class="price-tip">
					<view class="price-item">
						<view class="exchange">
							兑换：<text class="total">{{priceTotal}}</text> 伴豆/星光
						</view>
						<view class="xg-tips">
							10伴豆=10星光=1元
						</view>
					</view>
				</view>
				<view class="pay-title">
					<view class="select-title">
						选择兑换账户
					</view>
					<view class="select-tips">
						兑换后可获取，不可撤销
					</view>
				</view>
				<view class="pay-type-item">
					<image src="@/static/images/dou.png" mode="widthFix"></image>
					<text class="pay-name">奖励账户</text>
					<text class="pay-balance">{{userStore.userInfo.reward_money}}伴豆</text>
					<view @click="radioChange('2')">
						<image v-if="radioCurrentIndex=='2'" class="radio-img" src="@/static/images/yes.png" mode="aspectFill"></image>
						<image v-else class="radio-img" src="@/static/images/no.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="pay-type-item">
					<image src="@/static/images/bill.png" mode="widthFix"></image>
					<text class="pay-name">通用账户</text>
					<text class="pay-balance">{{userStore.userInfo.now_money}}星光</text>
					<view @click="radioChange('1')">
						<image v-if="radioCurrentIndex=='1'" class="radio-img" src="@/static/images/yes.png" mode="aspectFill"></image>
						<image v-else class="radio-img" src="@/static/images/no.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="reward-btn" @click="exchange">
					兑换
				</view>
			</view>
		</uv-popup>
		<!-- 获取到的账号 -->
		<uv-popup ref="copyRef" mode="center" closeable :closeOnClickOverlay="false" :safeAreaInsetBottom="false" round="15">
			<view class="copy-item">
				<view class="title" v-if="titleName=='mobile'">
					获取手机号
				</view>
				<view class="title" v-if="titleName=='wechat'">
					获取微信号
				</view>
				<view class="title" v-if="titleName=='qq'">
					获取QQ号
				</view>
				<view class="title" v-if="titleName=='email'">
					获取邮箱号
				</view>
				<view class="title" v-if="titleName=='tiktok'">
					获取抖音号
				</view>
				<view class="title" v-if="titleName=='red_book'">
					获取小红书号
				</view>
				<view style="margin: 100rpx auto 40rpx auto;">
					<image src="@/static/images/phone_icon.png" mode="aspectFill" v-if="titleName=='mobile'">
					</image>
					<image src="@/static/images/wx_icon.png" mode="aspectFill" v-if="titleName=='wechat'">
					</image>
					<image src="@/static/images/qq_icon.png" mode="aspectFill" v-if="titleName=='qq'">
					</image>
					<image src="@/static/images/emial_icon.png" mode="aspectFill" v-if="titleName=='email'">
					</image>
					<image src="@/static/images/douyin_icon.png" mode="aspectFill" v-if="titleName=='tiktok'">
					</image>
					<image src="@/static/images/redbook_icon.png" mode="aspectFill" v-if="titleName=='red_book'">
					</image>
				</view>
				<view class="number">
					{{number}}
				</view>
				<view class="btn" @click="copyNumber">
					一键复制
				</view>
			</view>
		</uv-popup>
		<!-- 联系方式提示 -->
		<uv-popup :round="15" ref="showRef" mode="center" :safeAreaInsetBottom="false" :closeOnClickOverlay="false">
			<view class="tips-popup">
				<view class="tips-title">
					兑换说明
				</view>
				<view class="chat-title">
					兑换站外对接方式
				</view>
				<view class="tips-conent">
					1、手机号 {{mobileTotal}}伴豆/星光
				</view>
				<view class="tips-conent">
					2、微信号 {{wechatTotal}}伴豆/星光
				</view>
				<view class="tips-conent">
					3、QQ号 {{qqTotal}}伴豆/星光
				</view>
				<view class="tips-conent">
					4、邮箱号 {{emailTotal}}伴豆/星光
				</view>
				<view class="tips-conent">
					5、抖音号 {{tiktokTotal}}伴豆/星光
				</view>
				<view class="tips-conent">
					6、小红书 {{redBookTotal}}伴豆/星光
				</view>
				<view class="know-btn" @click="showRef.close()">
					知道了
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, reactive, onMounted } from 'vue';
	import { useActiveStore } from "@/store/modules/active.js"
	import { useUserStore } from "@/store/modules/user.js"
	import { throttle } from '@/utils/utils';
	const userStore = useUserStore()
	const activeStore = useActiveStore()
	const baseurl = ref('')
	const userContactList = ref([]) //用户联系方式列表
	const radioCurrentIndex = ref('1')
	const titleName = ref('')
	const number = ref('')
	const priceTotal = ref('') //购买联系方式的价格
	const copyRef = ref()
	const getPhoneRef = ref()
	const showRef = ref()
	const mobileTotal = ref(0)
	const wechatTotal = ref(0)
	const qqTotal = ref(0)
	const emailTotal = ref(0)
	const tiktokTotal = ref(0)
	const redBookTotal = ref(0)
	const props = defineProps(['userId'])
	// 获取用户联系方式列表（购买）
	const getPayUserContactList = async () => {
		let res = await activeStore.payUserContactList({
			id: props.userId,
			type: '2'
		})
		if (res.code == 200) {
			userContactList.value = res.data
		}
	}
	onMounted(() => {
		baseurl.value = uni.getStorageSync('baseUrl')
		getPayUserContactList()
	})
	const openTips = () => {
		getPrice()
		showRef.value.open()
	}
	// 获取用户联系方式（购买）
	const getContactInfo = (type) => {
		radioCurrentIndex.value = '1'
		titleName.value = type
		userStore.getUserInfo()
		if (type == 'mobile' && userContactList.value.mobile_status == 1) {
			return uni.$uv.toast('未提供手机号，请尝试其他联系方式')
		}
		if (type == 'wechat' && userContactList.value.wechat_status == 1) {
			return uni.$uv.toast('未提供微信号，请尝试其他联系方式')
		}
		if (type == 'qq' && userContactList.value.qq_status == 1) {
			return uni.$uv.toast('未提供QQ号，请尝试其他联系方式')
		}
		if (type == 'email' && userContactList.value.email_status == 1) {
			return uni.$uv.toast('未提供邮箱号，请尝试其他联系方式')
		}
		if (type == 'tiktok' && userContactList.value.tiktok_status == 1) {
			return uni.$uv.toast('未提供抖音号，请尝试其他联系方式')
		}
		if (type == 'red_book' && userContactList.value.red_book_status == 1) {
			return uni.$uv.toast('未提供小红书号，请尝试其他联系方式')
		}
		getPayContactState(type)
	}
	// 查询用户是否已购买过联系方式
	const getPayContactState = async (type) => {
		let res = await activeStore.getPayContactState({
			contact: type,
			id: props.userId,
			type: '2'
		})
		if (res.code == 200) {
			number.value = res.data.contact
			copyRef.value.open()
		} else {
			if (type == 'mobile') {
				let res = await userStore.getConFig({
					type: 'mobilePrice'
				})
				if (res.code == 200) {
					priceTotal.value = res.data.content
				}
			} else if (type == 'wechat') {
				let res = await userStore.getConFig({
					type: 'wechatPrice'
				})
				if (res.code == 200) {
					priceTotal.value = res.data.content
				}
			} else if (type == 'qq') {
				let res = await userStore.getConFig({
					type: 'qqPrice'
				})
				if (res.code == 200) {
					priceTotal.value = res.data.content
				}
			} else if (type == 'email') {
				let res = await userStore.getConFig({
					type: 'emailPrice'
				})
				if (res.code == 200) {
					priceTotal.value = res.data.content
				}
			} else if (type == 'tiktok') {
				let res = await userStore.getConFig({
					type: 'tiktokPrice'
				})
				if (res.code == 200) {
					priceTotal.value = res.data.content
				}
			} else {
				let res = await userStore.getConFig({
					type: 'redBookPrice'
				})
				if (res.code == 200) {
					priceTotal.value = res.data.content
				}
			}
			getPhoneRef.value.open()

		}
	}
	const getPrice = async () => {
		let res1 = await userStore.getConFig({
			type: 'mobilePrice'
		})
		if (res1.code == 200) {
			mobileTotal.value = res1.data.content
		}
		let res2 = await userStore.getConFig({
			type: 'wechatPrice'
		})
		if (res2.code == 200) {
			wechatTotal.value = res2.data.content
		}
		let res3 = await userStore.getConFig({
			type: 'qqPrice'
		})
		if (res3.code == 200) {
			qqTotal.value = res3.data.content
		}

		let res4 = await userStore.getConFig({
			type: 'emailPrice'
		})
		if (res4.code == 200) {
			emailTotal.value = res4.data.content
		}

		let res5 = await userStore.getConFig({
			type: 'tiktokPrice'
		})
		if (res5.code == 200) {
			tiktokTotal.value = res5.data.content
		}

		let res6 = await userStore.getConFig({
			type: 'redBookPrice'
		})
		if (res6.code == 200) {
			redBookTotal.value = res6.data.content
		}
	}
	// 复制号码
	const copyNumber = () => {
		uni.setClipboardData({
			data: number.value,
			success: function() {
				copyRef.value.close()
			}
		});
	}
	// 切换支付方式
	const radioChange = (type) => {
		radioCurrentIndex.value = type
	}
	// 确认兑换
	const exchange = throttle(async () => {
		let params = {
			contact: titleName.value,
			id: props.userId,
			type: '2',
			pay_type: radioCurrentIndex.value
		}
		let res = await activeStore.payGetContact(params)
		if (res.code == 200) {
			uni.$uv.toast('兑换成功')
			number.value = res.data.contact
			getPhoneRef.value.close()
			copyRef.value.open()
		}
	}, 200)
</script>

<style lang="scss" scoped>
	.tips-popup {
		width: 630rpx;

		.tips-title {
			padding: 40rpx 0 60rpx 0;
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			text-align: center;
		}

		.chat-title {
			padding: 8rpx 50rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}

		.tips-conent {
			padding: 8rpx 50rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
		}

		.know-btn {
			width: 550rpx;
			height: 88rpx;
			background: #FE3052;
			border-radius: 44rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			margin: 60rpx auto 40rpx auto;
		}
	}

	.pay-tips {
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		padding-bottom: 20rpx;
	}

	// 获取手机号
	.copy-item {
		width: 630rpx;
		padding: 40rpx;
		text-align: center;

		.title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
		}

		image {
			border-radius: 50%;
			width: 128rpx;
			height: 128rpx;
		}

		.number {
			font-weight: bold;
			font-size: 40rpx;
			color: #FE3052;
		}

		.btn {
			margin-top: 100rpx;
			width: 550rpx;
		}
	}

	.abutment-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 30rpx 60rpx 30rpx;

		.abutment-type {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;

			&:before {
				content: "";
				width: 2rpx;
				height: 50%;
				position: absolute;
				top: 25%;
				right: -36rpx;
				background: #EEEEEE;
			}

			image {
				width: 48rpx;
				height: 48rpx;
			}

			.title {
				padding-top: 12rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #222222;
			}
		}

	}

	.register-popup {
		padding: 40rpx 30rpx 40rpx 30rpx;

		.register-title {
			display: flex;
			align-items: center;
			justify-content: center;

			.title {
				flex: 1;
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
				text-align: center;
			}

			.del-btn {

				width: 32rpx;
				height: 32rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		// 获取信息
		.price-tip {
			.price-item {
				.exchange {
					margin-top: 60rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #222222;
					text-align: center;

					.total {
						font-size: 48rpx;
						color: #FE3052;
					}
				}

				.xg-tips {
					margin-top: 20rpx;
					margin-bottom: 60rpx;
					text-align: center;
					font-weight: 500;
					font-size: 28rpx;
					color: #666666;
				}
			}
		}

		.pay-title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.select-title {
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
			}

			.select-tips {
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
			}
		}

		.pay-type-item {
			padding: 0 30rpx;
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			height: 108rpx;
			background: #F6F6F6;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			image {
				width: 44rpx;
				height: 44rpx;
			}

			.pay-name {
				padding: 0 20rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
			}

			.pay-balance {
				flex: 1;
				font-weight: 400;
				font-size: 28rpx;
				color: #FE3052;
			}

			.radio-img {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.reject-tip {
			padding-top: 20rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			text-align: center;
		}

		.reject-title {
			margin-top: 60rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}

		.code-img {
			margin: 100rpx auto 40rpx auto;
			width: 128rpx;
			height: 128rpx;
			background: #F6F6F6;
			border-radius: 50%;

			image {
				width: 56rpx;
				height: 56rpx;
			}
		}

		.code-number {
			font-weight: bold;
			font-size: 40rpx;
			color: #FE3052;
			text-align: center;
		}

		.copy-btn {
			height: 88rpx;
			background: #FE3052;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			margin-top: 100rpx;
			font-weight: bold;
			font-size: 28rpx;
			line-height: 88rpx;
			text-align: center;
			color: #FFFFFF;
		}

		.share-to {
			display: flex;
			align-items: center;
			justify-content: start;

			.from-app {
				margin: 80rpx 86rpx 200rpx 0;

				image {
					width: 92rpx;
					height: 92rpx;
				}

				.app-name {
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					text-align: center;
				}
			}
		}

		.tips {
			padding: 100rpx 0;
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #333;

			.recharge {

				color: #FE3052;
			}
		}

		.tips1 {
			text-align: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}

		.sign-tip {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}

		.footer-btn {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 100rpx;
			font-weight: bold;
			font-size: 28rpx;
			line-height: 88rpx;
			text-align: center;

			.cancel {
				width: 260rpx;
				height: 88rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				background: #F6F6F6;
				color: #666666;
			}

			.confirm {
				width: 260rpx;
				height: 88rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				background: #FE3052;
				color: #fff;
			}
		}

		.recharge-btn {
			width: 550rpx;
			height: 88rpx;
			background: #FE3052;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			margin: auto;
		}

		.register-statistics {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 60rpx;

			.line-pink {
				width: 6rpx;
				height: 24rpx;
				background: #FE3052;
				border-radius: 4rpx;
			}

			.register-num {
				padding-left: 12rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #222;

				.residue-num {
					padding-left: 12rpx;
					color: #FE3052;
				}
			}

			.active-cancel {
				font-weight: bold;
				font-size: 28rpx;
				color: #999999;
			}
		}

		// 打赏
		.money-select-item {
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex-wrap: wrap;

			.select-item {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 30rpx;
				width: 206rpx;
				height: 100rpx;
				background: #F6F6F6;
				border-radius: 12rpx 12rpx 12rpx 12rpx;

				.money-img {
					width: 32rpx;
					height: 32rpx;
				}

				.price {
					font-weight: 400;
					font-size: 28rpx;
				}

				&.active {
					background: #FFF1F3;
					color: #FE3052;
					border: 2rpx solid #FE3052;
				}
			}
		}

		.diy-price {
			padding: 60rpx 0;

			.image-icon {
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #F6F6F6;
				padding: 18rpx 0;

				image {
					width: 44rpx;
					height: 44rpx;
				}

				.input {
					padding-left: 20rpx;
				}
			}
		}

		.pay-account {

			.account-title {
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
			}

			.account-price {
				display: flex;
				align-items: center;
				margin-top: 30rpx;
				width: 670rpx;
				height: 108rpx;
				background: #F6F6F6;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				image {
					margin-left: 30rpx;
					width: 44rpx;
					height: 44rpx;
				}

				.account {
					padding: 0 20rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #222222;
				}

				.price {
					font-weight: 400;
					font-size: 28rpx;
					color: #FE3052;
				}
			}
		}

		.reward-btn {
			margin: auto;
			margin-top: 60rpx;
			width: 670rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: #FE3052;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
		}

		.rank-list {

			display: flex;
			align-items: center;
			margin-top: 40rpx;

			.avatar-box {
				position: relative;

				image {
					width: 124rpx;
					height: 124rpx;
				}

				.number-one {
					position: absolute;
					top: 0;
					left: 0;
					width: 48rpx;
					height: 48rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.rank-info {
				flex: 1;
				margin-left: 24rpx;

				.rank-item {
					display: flex;
					align-items: center;

					.nickname {
						font-weight: bold;
						font-size: 32rpx;
						color: #222222;
					}

					.relationship {
						margin-left: 12rpx;
						width: 112rpx;
						height: 40rpx;
						background: #FFF1F3;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						line-height: 40rpx;
						text-align: center;
						font-weight: 400;
						font-size: 22rpx;
						color: #FE3052;
					}
				}

				.adress-info {
					display: flex;
					align-items: center;
					margin-top: 22rpx;

					.age-tips {
						display: flex;
						align-items: center;
						// width: 88rpx;
						height: 32rpx;
						padding: 8rpx;
						background: #D9EAFF;
						border-radius: 20rpx;

						image {
							width: 20rpx;
							height: 20rpx;
						}
					}

					.city-address {
						margin-left: 12rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}
				}

			}

			.invite-btns {
				.reason-btns {
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					border: 2rpx solid #D8D8D8;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
				}

				.btns {
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					background: #F6F6F6;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #666666;
				}

				.money {
					padding-top: 14rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;

					.money-num {
						color: #FE3052;
					}
				}
			}
		}

		// 签到信息
		.sign-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;

			.sign-name {
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}

			.sign-phone {
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}

			.y-sign-state {
				font-weight: 400;
				font-size: 24rpx;
				color: #FE3052;
			}

			.n-sign-state {
				font-weight: 400;
				font-size: 24rpx;
				color: #999;
			}
		}

		.reason {
			padding-top: 20rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
		}
	}
</style>